<template>
    <div class="bar-chart-box">
        <div class="bar-chart-container"></div>
    </div>
</template>

<script>
import echarts from 'echarts'; 
export default {
    name: 'barChart',
    props: {

    },
    mounted() {
        this.generateBarChart();
    },
    methods: {
        generateBarChart() {
            let myChart = echarts.init(this.$el.querySelector('.bar-chart-container'));
            let option = {
                legend: {
                    icon: "none",
                    data: ['迁入', '迁出'],
                    top: 10,
                    right: 0,
                    textStyle:  {
                        color: "rgba(0,0,0,0.65)",
                        rich: {
                            circle0: {
                                width: 8,
                                height: 8,
                                backgroundColor: '#027aff',
                                borderRadius: 4
                            },
                            circle1: {
                                width: 8,
                                height: 8,
                                backgroundColor: '#3eb9da',
                                borderRadius: 4
                            }
                        }
                    },
                    formatter: function (name) {
                        let index = 0;
                        index = option.series.findIndex(item => item.name === name);
                        return `{circle${index}|}{b| ${name} }`;
                    }
                },
                tooltip: {
                    show: true,
                    backgroundColor: '#FFFFFF',
                    textStyle: {
                        color: 'rgba(0,0,0,0.65)'
                    },
                    extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',
                    // formatter: function(params) {
                    //     // return `${params.marker}${params.name} <br /><span style="margin-right: 16px"></span>${params.value}万`;
                    //     return `${params.marker}${params.name} <br />${params.value}万`;
                    // }
                },
                color: ['#027aff', '#3eb9da'],
                grid: {
                    left: '0',
                    right: '0',
                    bottom: '0',
                    containLabel: true
                },
                xAxis: { 
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月','6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    axisLabel: {
                        color: 'rgba(0,0,0,0.65)'
                    },
                    axisTick: { // 那个小小的与轴的连线
                        show: false
                    },
                    axisLine: { // 坐标轴线
                        lineStyle: {
                            color: 'rgba(244,245,248,1)'
                        }
                    }
                },
                yAxis: {
                    name: '客户数(个)',
                    nameTextStyle: {
                        fontSize: 14,//正常是不用添加
                        color: 'rgba(0,0,0,0.65)'
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false,
                        lineStyle: {
                            color: 'rgba(244,245,248,1)'
                        }
                    },
                    axisLabel: {
                        color: 'rgba(0,0,0,0.65)'
                    },
                    splitLine: { // 网格的分隔线
                        lineStyle: {
                            color: 'rgba(244,245,248,1)'
                        }
                    }
                },
                series: [
                    {
                        name: '迁入',
                        type: 'bar',
                        barWidth: 12,
                        barGap: 0,
                        itemStyle: {
                            barBorderRadius: 2
                        },
                        data: [320, 332, 200, 100, 400, 600, 10, 80, 600, 100, 40,80]
                    },
                    {
                        name: '迁出',
                        type: 'bar',
                        barWidth: 12,
                        barGap: 0,
                        itemStyle: {
                            barBorderRadius: 2
                        },
                        data: [220, 432, 208, 100, 300, 800, 101, 82, 400, 200, 100, 680]
                    }
                ]
            };
            myChart.setOption(option);
        }
    }
}
</script>